import 'package:flutter/material.dart';
import './custom_animated_bottom_bar.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> titles = ['首页', '搜索', '排名', '直播'];

  List<String> bodyImages = [
    'assets/image/1.jpeg',
    'assets/image/2.jpeg',
    'assets/image/3.jpeg',
    'assets/image/4.jpeg',
  ];

  int _currentIndex = 0;

  final _inactiveColor = Colors.grey;

  Color backgroundColor = Color(0xff050B18);

  List<Widget>? _pages;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        backgroundColor: backgroundColor,
        brightness: Brightness.dark,
        automaticallyImplyLeading: false,
        title: Text(titles[_currentIndex]),
      ),
      body: getBody(),
      bottomNavigationBar: CustomAnimationBar(
          containerHeight: 56,
          selectedIndex: _currentIndex,
          backgroundColor: backgroundColor,
          showElevation: true,
          itemCornerRadius: 24,
          curve: Curves.easeInOut,
          onItemSelected: (index) => {
                setState(() => {_currentIndex = index})
              },
          items: <MyBottomNavigationBarItem>[
            MyBottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text(titles[0]),
              activeColor: Color(0xffF4D144),
              inactiveColor: _inactiveColor,
              textAlign: TextAlign.center,
            ),
            MyBottomNavigationBarItem(
              icon: Icon(Icons.search),
              title: Text(titles[1]),
              activeColor: Colors.greenAccent,
              inactiveColor: _inactiveColor,
              textAlign: TextAlign.center,
            ),
            MyBottomNavigationBarItem(
              icon: Icon(Icons.apps),
              title: Text(
                titles[2],
              ),
              activeColor: Colors.pink,
              inactiveColor: _inactiveColor,
              textAlign: TextAlign.center,
            ),
            MyBottomNavigationBarItem(
              icon: Icon(Icons.video_camera_front),
              title: Text(titles[3]),
              activeColor: Colors.blue,
              inactiveColor: _inactiveColor,
              textAlign: TextAlign.center,
            ),
          ]),
    );
  }

  Widget getBody() {
    double width = 414;
    double height = MediaQuery.of(context).size.width * (812 / 375);

    if (_pages == null) {
      _pages = List.generate(bodyImages.length, (index) {
        return SingleChildScrollView(
            child: Container(
          color: backgroundColor,
          width: width,
          height: height,
          alignment: Alignment.center,
          child: Image(
            image: AssetImage(
              bodyImages[index],
            ),
            fit: BoxFit.fill,
          ),
        ));
      }).toList();
    }

    return IndexedStack(
      index: _currentIndex,
      children: _pages!,
    );

    // Container(
    //   child: Center(
    //     child: Text(
    //       titles[_currentIndex],
    //       style: TextStyle(
    //           fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
    //     ),
    //   ),
    // );
  }
}
